<template>
  <div v-show="$route.name == 'purchase-update'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/purchase-list' }">采购列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改实付</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveForm" label-width="100px" class="demo-saveForm">
        <el-row>
          <el-col :span="6">
            <el-form-item style="width:80%" label="ID">
              <el-input v-model="saveForm.id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="订单日期" prop="date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                value-format='yyyy-MM-dd'
                v-model="saveForm.date">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="类型" prop="product">
              <el-input v-model="saveForm.product" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="名称" prop="productn">
              <el-input v-model="saveForm.productn" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item style="width:80%" label="规格" prop="model">
              <el-input v-model="saveForm.model" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="单位" prop="unit">
              <el-input v-model="saveForm.unit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="入仓时间" prop="installtime">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                value-format='yyyy-MM-dd HH:mm:ss'
                v-model="saveForm.installtime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商" prop="gys">
              <el-input v-model="saveForm.gys"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item style="width:80%" label="数量" prop="amoumt">
              <el-input v-model="saveForm.amoumt" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="单价" prop="price">
              <el-input-number v-model="saveForm.price" controls-position="right" :precision="2" :step="1" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="进货金额" prop="total">
              <el-input-number v-model="saveForm.total" controls-position="right" :precision="2" :step="1" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:80%" label="实付" prop="paid">
              <el-input-number v-model="saveForm.paid" controls-position="right" :precision="2" :step="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结算方式" prop="js">
              <el-radio-group v-model="saveForm.js">
                <el-radio label="赊销">赊销</el-radio>
                <el-radio label="现金">现金</el-radio>
                <el-radio label="银行存款">银行存款</el-radio>
                <el-radio label="预付">预付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="other">
              <el-input v-model="saveForm.other"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="submitForm()">确定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      saveForm: {},
      saveFormRules: {
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        product: [{ required: true, message: '请选择类型', trigger: 'change' }],
        productn: [{ required: true, message: '请输入商品', trigger: 'blur' }],
        model: [{ required: true, message: '请输入规格', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        paid: [{ required: true, message: '请输入实付', trigger: 'blur' }],
        other: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        js: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
        gys: [{ required: true, message: '请输入供应商', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getGoodsData()
  },
  methods: {
    async submitForm() {
      this.$refs.saveForm.validate(async (valid) => {
        if (!valid) return
        // 可以发起新增入库单的网络请求
        const { data: result } = await this.$http.put('/goods/' + this.id, {
          data: this.saveForm
        })
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('修改成功！')
        this.$router.push({ path: '/purchase-list' })
      })
    },
    getGoodsData() {
      if (this.$route.name === 'purchase-update') {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('PurchaseId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('PurchaseId')
        }
        this.getPurchase()
      }
    },
    async getPurchase() {
      // 发起编辑的网络请求
      const { data: result } = await this.$http.get('/goods/' + this.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.saveForm = result.data
    },
    // 返回
    back() {
      localStorage.removeItem('PurchaseId')
      this.$router.push({ 'name': 'purchase-list' })
    }
  }
}
</script>
